﻿<template>
  <base-dialog
    destroy-on-close
    show-footer
    :width="700"
    v-model="modalShow"
    :title="modalType === 'add' ? '新增地址' : '编辑地址'"
    @close="hide"
  >
    <el-form ref="addressFormRef" :model="addressForm" :rules="formRule" label-width="auto">
      <el-form-item label="地址类型" prop="type">
        <el-select v-model="addressForm.type" placeholder="请选择地址类型" :disabled="true">
          <el-option label="发货地址" :value="1" />
          <el-option label="归还地址" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="发货人姓名" prop="name">
        <el-input v-model="addressForm.name" :maxlength="10" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="手机号码" prop="telephone">
        <el-input v-model="addressForm.telephone" :maxlength="11" placeholder="请输入手机号码" />
      </el-form-item>
      <el-form-item label="发货区域" prop="area">
        <el-cascader
          placeholder="请选择地区"
          ref="cascaderRef"
          v-model="addressForm.area"
          :options="areaData"
          :style="{ width: '100%' }"
          :props="{ label: 'text' }"
        />
      </el-form-item>
      <el-form-item label="详细地址" prop="street">
        <el-input v-model="addressForm.street" type="textarea" :maxlength="100" placeholder="请输入详细地址" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="hide">取消</el-button>
      <el-button type="primary" @click="operateConfirm">确认</el-button>
    </template>
  </base-dialog>
</template>

<script setup lang="js">
  const props = defineProps({
    // 弹窗显示隐藏
    visble: { type: Boolean, default: false },
    // 当前编辑数据
    currentInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 地区数据
    areaData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 弹窗类型
    modalType: { type: String, default: "add" },
    // 地址类型
    currentType: { type: Number, default: 0 },
  });
  const emit = defineEmits(["hide", "confirm"]);
  // 监听显隐
  watch(
    () => props.visble,
    v => {
      modalShow.value = v;
      if (props.visble) {
        init();
      }
    }
  );
  // 显示、隐藏
  const modalShow = ref(false);
  // 表单ref
  const addressFormRef = ref(null);
  // 级联Ref
  const cascaderRef = ref(null);
  // 表单
  const addressForm = reactive({
    name: "",
    telephone: "",
    area: [],
    street: "",
  });
  // 表单规则
  const formRule = reactive({
    type: [{ required: true, message: "请选择地址类型", trigger: "blur" }],
    name: [{ required: true, message: "请输入名称", trigger: "blur" }],
    telephone: [{ required: true, message: "请输入正确的手机号码", trigger: "blur", pattern: /^1[3-9]\d{9}$/ }],
    area: [{ required: true, message: "请选择地区", trigger: "blur" }],
    street: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
  });
  // 初始化
  const init = () => {
    if (props.modalType === "add") {
      Object.assign(addressForm, {
        type: props.currentType,
        name: "",
        telephone: "",
        area: null,
        street: "",
      });
    } else {
      const { name, telephone, street, provinceId, cityId, areaId } = props.currentInfo;
      Object.assign(addressForm, {
        type: props.currentType,
        name: name,
        telephone: telephone,
        area: provinceId && cityId && areaId ? [provinceId, cityId, areaId] : null,
        street: street,
      });
    }
  };
  // 关闭
  const hide = refresh => {
    Object.assign(addressForm, {
      name: "",
      telephone: "",
      area: [],
      street: "",
    });
    emit("hide", refresh);
  };
  // 确认
  const operateConfirm = () => {
    addressFormRef.value.validate(valid => {
      if (!valid) {
        return;
      }
      console.warn(addressForm, cascaderRef.value);
      const { name, telephone, street, area, type } = addressForm;
      const areaLabel = cascaderRef.value.getCheckedNodes()[0].pathLabels;
      const params = {
        name,
        telephone,
        street,
        provinceId: area[0],
        cityId: area[1],
        areaId: area[2],
        provinceName: areaLabel[0],
        cityName: areaLabel[1],
        areaName: areaLabel[2],
        source: 2,
        type,
      };

      if (props.modalType === "add") {
        Api.product.addAddress(params).then(() => {
          $msg.success("新增成功");
          hide(true);
        });
      } else {
        Api.product.editAddress({ ...params, id: props.currentInfo.id }).then(() => {
          $msg.success("操作成功");
          hide(true);
        });
      }
    });
  };
</script>

<style lang="scss" scoped></style>
